<template>
  <div class="edit-mobile">
    <top-header>
      <template #right>
        <top-btn-one v-model="loading" @click="submit">保存</top-btn-one>
      </template>
    </top-header>

    <div class="common-list-body-3">
      <div class="form">
        <div class="field-div username">
          <van-field v-model="mobile" type="digit" placeholder="请输入新手机号" clearable @focus="focus"></van-field>
        </div>

        <div class="field-div">
          <van-field v-model="code" placeholder="请输入验证码" type="digit" maxlength="6" clearable @focus="focus">
            <template #button>
              <van-button size="small" type="primary" @click="getSms" v-show="!counting">获取验证码</van-button>
              <div class="countdown" v-show="counting">重新获取(<van-count-down ref="countDown" :time="60000" @finish="countDownFinish" :auto-start="false" format="ss" />)S</div>
            </template>
          </van-field>
        </div>

        <div class="error">{{ errmsg }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import Base from "@/utils/base";
import TopHeader from "@/components/TopHeader.vue";
import TopBtnOne from "@/components/TopBtnOne.vue";
import { Field, CountDown, Button } from "vant";
import Api from "@/api";

@Component({
  name: "EditMobile",
  components: {
    TopHeader,
    TopBtnOne,
    VanField: Field,
    VanCountDown: CountDown,
    VanButton: Button
  }
})
export default class EditMobile extends Base {
  private mobile = "";
  private code = "";
  private uuid = "";
  private errmsg = "";
  // 验证码倒计时是否正在执行
  private counting = false;
  private loading = false;
  // 验证码是否发送过
  private sended = false;
  private verifyCode = "";

  private focus() {
    this.errmsg = "";
  }

  /**
   * 发送验证码
   */
  private async getSms() {
    if (!this.mobile || !this.$tools.checkPhone(this.mobile)) {
      this.errmsg = "请输入正确的手机号码";
      return;
    }
    const res = await Api.CaptchaSMS({ phonenumber: this.mobile });
    if (res.code === 200) {
      this.uuid = res.uuid;
      // 开始倒计时
      this.sended = true;
      this.counting = true;
      this.verifyCode = res.verifyCode;
      (this.$refs.countDown as any).start();
    } else {
      this.errmsg = res.msg;
    }
  }

  /**
   * 验证码倒计时结束事件
   */
  private countDownFinish() {
    this.counting = false;
    (this.$refs.countDown as any).reset();
  }

  private check() {
    if (!this.mobile || !this.$tools.checkPhone(this.mobile)) {
      this.errmsg = "请输入正确的手机号码";
      return false;
    }
    if (!this.sended) {
      this.errmsg = "请先发送验证码";
      return false;
    }
    if (this.sended && !this.code) {
      this.errmsg = "请输入验证码";
      return false;
    }

    if (this.verifyCode !== this.code) {
      this.errmsg = "验证码错误";
      return false;
    }
    return true;
  }

  /**
   * 表单提交
   */
  private async submit() {
    if (!this.loading && this.check()) {
      this.loading = true;
      this.errmsg = "";
      const toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "正在提交..."
      });
      const res = await Api.UpdatePersonMobile({ userId: this.currentUser.userId, phonenumber: this.mobile });

      if (res.code === 200) {
        this.updateUser(true).then(() => {
          toast.clear();
          this.loading = false;
          this.$toast.success({
            message: "修改成功",
            onClose: () => {
              this.$router.go(-1);
            }
          });
        });
      } else {
        toast.clear();
        this.loading = false;
        this.errmsg = res.msg;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.edit-mobile {
  background-color: white;
  .common-list-body-3 {
    padding: 0 26px;
  }
  .form {
    overflow: hidden;
  }

  .field-div {
    display: flex;
    align-items: center;
    height: 39px;
    background: rgba(132, 144, 163, 0.07);
    border-radius: 4px;
    margin-top: 16px;
    .van-cell {
      background: transparent;
      padding-left: 10px;
      padding-right: 5px;
      line-height: 0px;

      .van-button--small {
        width: 88px;
        height: 29px;
        background: #65b0fb;
        border-radius: 4px;
        border: 0;
      }

      /deep/.van-field__control {
        color: #283d6a;
      }
    }
    /deep/.van-icon-clear {
      padding-right: 16px;
    }
  }

  .countdown {
    font-size: 12px;
    color: #a6afc0;
    padding-right: 5px;
    display: flex;
    line-height: 180% !important;
    .van-count-down {
      color: #a6afc0;
    }
  }

  .error {
    color: #d5001c;
    margin-top: 10px;
    text-align: center;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
